@import 'public.less';
html,body{
    height: 100%;
    background:  @basebgcolor;
    .pxToRem(font-size,85);
    
}
.header{
    .pxToRem(height,130);
    .pxToRem(padding-left,80);
    .pxToRem(padding-right,80);
    .pxToRem(padding-top,50);
    .pxToRem(line-height,130);
    text-align: left;
    color: #fff;
}
.main{
    height:80%;
    .pxToRem(padding,80);
    color: #fff;
    position: relative;
    ul{
        li{
            .pxToRem(padding-top,100);
            .pxToRem(padding-bottom,80)
        }
        li:nth-child(3),li:nth-child(4){
            p{
                display: flex;
                justify-content: space-between;
            }
            div{
                height: 2px;
                .pxToRem(margin-top,150);
                background: #645b6c;
                position: relative;
                span{
                    display:block;
                    width: 0;
                    height: 100%;
                    background: #24c889;
                }    
                .pro_btn,.pros_btn{
                    .pxToRem(width,50);
                    .pxToRem(height,50);
                    border-radius: 50%;
                    background: #fff;
                    position: absolute;
                    top:0;
                    left:0;
                    margin-top: 0;
                    transform: translateY(-50%);
                }
                
            }
        }
    }
    p:nth-child(2),p:nth-child(3){
        position: absolute;
        
        left: 0;
        width: 100%;
        text-align: center;
        .pxToRem(font-size,60);
        color: #817b86;
    }
    p:nth-child(2){
        .pxToRem(bottom,165);
    }
    p:nth-child(3){
        .pxToRem(bottom,80);
    }
}
.footer{
    .pxToRem(height,200);
    text-align: center;
    button{
        width: 80%;
        height: 100%;
        color: #fff;
        background: #24c789;
        border: none;
        border-radius: 30px;
    }
}